<template>
  <div class="trade">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">近期交易目录</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="i in 3" :key="i">
                <div class="ttop">//出售2000普通语点</div>
                <div class="tbottom">//伍二娃   售价：200钻石语点</div>
              </li>
            </ul>
          </div>
        </div>
        <small-carousel></small-carousel>
      </div>
      <div class="page-right">
        <div style="text-align:right;margin-bottom: 20px;">
          <button class="yellow-btn" style="width: 120px;" @click="dialogFormVisible = true">发布语点交易</button>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">
            <ul class="trade-head clearfix">
              <li class="h1">出售语点</li>
              <li class="h2">售价</li>
              <li class="h3">发布人</li>
              <li class="h4">发布时间</li>
              <li class="h5">状态</li>
              <li class="h6">操作</li>
            </ul>
          </div>
          <div class="xyd-c-content">
            <ul class="trade-body clearfix">
              <trade-item :value="item" v-for="item,i in data" :key="i"></trade-item>
            </ul>
            <div class="pagination-container">
              <el-pagination
                :page-size="offset"
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="发布语点交易信息" top="20px" :visible.sync="dialogFormVisible">
      <div>
        <h3 style="text-align:center">交易规则</h3>
        <p>
          1、出售语点出售数量最低100<br/>
          2、普通语点出售数量以100为单位<br/>
          3、钻石语点与普通语点兑换比例不低于1:5<br/>
        </p>
      </div>
      <el-form :model="form">
        <el-form-item label="出售语点数量：" :label-width="formLabelWidth">
          <el-input-number v-model="form.sell_amount" :step="100" :min="100" placeholder="请输入出售语点数量"></el-input-number>
        </el-form-item>
        <el-form-item label="交易钻石语点：" :label-width="formLabelWidth">
          <el-input v-model="form.price" auto-complete="off" :placeholder="'请输入交易钻石语点，至少' + form.sell_amount * 0.2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="">
        <div style="margin:0 auto;margin-bottom:20px;text-align:left;width:360px;">
          <button class="common-btn" style="width:360px;" @click="handleSubmit">
            发布
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import SmallCarousel from 'views/components/smallCarousel'
import tradeItem from './tradeItem.vue'
import { getTrade, giveTrade } from 'api/user'
export default {
  name: 'trade',
  components: {
    NavBar,
    SmallCarousel,
    tradeItem
  },
  data() {
    return {
      data: [],
      form: {
        title: '出售语点',
        sell_amount: '',
        price: ''
      },
      page: 1,
      total: 0,
      offset: 10,
      formLabelWidth: '120px',
      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(params = {}) {
      getTrade({
        page: 1,
        ...params
      })
      .then(res => {
        this.total = res.data.page.last_page * this.offset
        this.data = res.data.trade
      })
      .catch(err => console.log(err))
    },
    handleSubmit() {
      if (this.form.sell_amount % 100 !== 0) {
        this.$message({
          message: '请输入100的倍数',
          type: 'warning'
        })
        return false
      }
      if (isNaN(this.form.price) || this.form.price % 1 !== 0) {
        this.$message({
          message: '钻石语点请输入整数',
          type: 'warning'
        })
        return false
      }
      if (this.form.price < this.form.sell_amount * 0.2) {
        this.$message({
          message: '售价不能低于' + this.form.sell_amount * 0.2 + '钻石语点',
          type: 'warning'
        })
        return false
      }
      giveTrade(this.form)
      .then(res => {
        this.dialogFormVisible = false
        this.$message({
          message: '发布成功',
          type: 'success'
        })
        this.form = {
          title: '出售语点',
          sell_amount: '',
          price: ''
        }
        this.fetchData()
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'warning'
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.trade{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 12px;
            >li{
              &:last-child{
                border-bottom: 0;
              }
              height: 70px;
              padding: 15px 0;
              border-bottom: 1px solid #e5e6e7;
              .ttop{
                line-height: 20px;
              }
              .tbottom{
                color: #999;
                font-size: 12px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .page-right{
      ul.trade-head{
        width: 100%;
        padding: 0 40px;
        >li{
          float: left;
          text-align: center;
        }
        .h1{width: 160px;}
        .h2{width: 150px;}
        .h3{width: 150px;}
        .h4{width: 200px;}
        .h5{width: 150px;}
        .h6{width: 60px;}
      }
      ul.trade-body{
        width: 100%;
        padding: 0 40px;
      }
    }
  }
}
</style>